<!-- 过渡效果 -->
<template>
    <div class="content">
        <button @click="flag = !flag">switch</button>
        <!-- duration动画时长 -->
        <!-- 生命周期  @apper页面加载时-->
        <transition name="fade" :duration="500" enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__flash" @before-enter="EnterFrom" @enter="EnterActive"
            @after-enter="EnterTo" @enter-cancelled="EnterCancel" @before-leave="LeaveFrom" @leave="Leave"
            @after-leave="LeaveTo" @leave-cancelled="LeaveCancel" @appear="">
            <div v-if="flag" class="box"></div>
        </transition>
        <button @click="add">ADD</button><button @click="pop">POP</button>
        <div class="wraps">
            <transition-group leave-active-class="animate_animated animate_bounceOut"
                enter-active-class="animate_animated animate__bounceIn">
                <div class="item" :key="item" v-for="item in list">{{ item }}
                </div>
            </transition-group>
        </div>


    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import 'animate.css'
import jsap from 'gsap'
const flag = ref<boolean>(true)
// 生命周期
const EnterFrom = (el: Element) => {
    console.log('进入之前');
}
const EnterActive = (el: Element, done: gsap.Callback) => {
    gsap.to(el, {
        width: 200, height: 200, onComplete: done
    })
}

const EnterTo = (el: Element) => {
    console.log('过渡完成');
}
const EnterCancel = (el: Element) => {
    console.log('过渡效果被打断');
}
const LeaveFrom = () => {
    console.log('离开之前');
}
const Leave = (el: Element, done: Function) => {
    console.log('离开过度曲线');
    setTimeout(() => {
        done()
    }, 5000)
}
const LeaveTo = () => {
    console.log('离开完成');
}
const LeaveCancel = () => {
    console.log('离开过度曲线被打断------------');
}



const list = reactive<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9])
const add = () => {
    list.push(list.length + 1)
}
const pop = () => {
    list.pop()
}

</script>

<style scoped lang="scss">
.box {
    width: 200px;
    height: 200px;
    background: red;
}

.fade-enter-from {
    width: 0;
    height: 0;
}

.fade-enter-active {
    transition: all 1.5s ease;
}

.fade-enter-to {
    width: 200px;
    height: 200px;
}

.fade-leave-from {
    width: 200px;
    height: 200px;
}

.fade-leave-active {
    transition: all 5s ease;
}

.fade-leave-to {
    width: 0;
    height: 0;
}


.loading {
    position: absolute;
    right: 10px;
    top: 10px;
    background: blue;
}

.wraps {
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    border: 1px solid #ccc;

    .item {
        margin: 10px;
        font-size: 30px;
    }
}
</style>